import React from 'react'
import NameButton from './NameButton'
import useStudents from '../hooks/useStudents.js'

export default ({answer, onWrong, onFinish, classname}) => {
  const {total} = useStudents(classname)
  const names = total.map(({id, name}) => ({id, name}))
  return (
    <div style={{
      display: 'flex', flexFlow: 'row-reverse wrap',
      justifyContent: 'center'
    }}>
      {names.map(({id, name}) => (
        <NameButton id={id} name={name}
                    key={id}
                    answer={answer}
                    onWrong={onWrong}
                    onFinish={onFinish}/>
      ))}
    </div>
  )
}
